<!-- 馆藏统计  -->
<template>
  <div class="container">
    <div ref="collection" :style="`width: 100%; height: ${cardHeight}px`"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { collectionStatistics, archiveAndBoxPie } from '@/api/rfid/board'
import throttle from '@/utils/throttle.js'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'collection',
  components: {},
  props: {
    cardHeight: {
      type: Number,
      default: 250,
    },
  },
  data() {
    return {
      myChart: null,
      throttledResize: null,
      collectionStatistics: [],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getCollectionStatistics()
    this.throttledResize = throttle(this.onWindowResize, 200)
    window.addEventListener('resize', this.throttledResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.throttledResize)
  },
  methods: {
    // 获取馆藏统计的数据
    getCollectionStatistics() {
      archiveAndBoxPie().then((res) => {
        if (res.data.code === 200) {
          this.collectionStatistics = this.transformData(res.data.data)
          this.initecharts()
        }
      })
    },
    // 定义一个函数来转换数据
    transformData(obj) {
      let result = []

      // 遍历对象的每个键
      for (const key in obj) {
        // eslint-disable-next-line no-prototype-builtins
        if (obj.hasOwnProperty(key)) {
          const items = obj[key]
          let transformedItems = []

          // 遍历每个子项并转换
          items.forEach((item) => {
            let newName = `${key == 'box' ? '盒' : '档案'} ${item.name}`
            transformedItems.push({
              name: newName,
              value: item.value,
            })
          })

          // 将转换后的子数组添加到结果数组
          result.push(transformedItems)
        }
      }

      return result
    },
    onWindowResize() {
      this.myChart.resize()
    },

    initecharts() {
      var chartDom = this.$refs.collection
      this.myChart = echarts.init(chartDom)
      // 定义颜色列表
      const colorList1 = ['#409EFF', '#D17278'] //档案的颜色列表
      const colorList2 = ['#5470c6', '#D17278'] //档案盒的颜色列表
      var option
      option = {
        title: {
          text: '',
          left: 'center',
          textStyle: {
            color: '#999',
            fontWeight: 'normal',
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'item',
        },
        series: this.collectionStatistics.map(function (data, idx) {
          var top = idx * 25
          var left = idx * 40
          var colorList = idx === 0 ? colorList1 : colorList2 // 根据饼图索引选择颜色列表

          return {
            type: 'pie',
            name: name,
            radius: 40,
            top: top + '%',
            height: '80%',
            left: left + '%',
            right: 0,
            bottom: 0,
            width: 200,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1,
            },
            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999',
                },
              },
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80,
            },
            data: data.map((item, dataIdx) => ({
              ...item,
              itemStyle: {
                color: colorList[dataIdx % colorList.length],
              },
            })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          }
        }),
      }

      option && this.myChart.setOption(option)
    },
  },
}
</script>
<style lang="less" scoped></style>
